<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课前15min</title>
</head>

<body>
    <div class="backcolor3"></div>
    <div class="backcolor2"></div>
    <div class="backcolor"></div>
    <div class="main" id="app">
        <div class="content" v-if="data !== null &&data.length > 0">
            <div class="content-pad">
                <div v-if="leftShow" class="left">学期筛选</div>
                <div class="items">
                    <div class="filter">
                        <label style="margin: 0 10px;">筛选</label>
                        <label>作者：</label>
                        <select v-model="filterAuthor" @change="filterData">
                            <option value="">全部</option>
                            <option v-for="author in authors" :value="author">{{ author }}</option>
                        </select>
                    </div>
                    <div class="grid" :style="{gridTemplateColumns: 'repeat(' + columns + ', 1fr)'}">
                        <a class="item" v-for="item in filteredData" :key="item.id" :href="item.url" target="_blank">
                            <div class="item-name">【{{item.author}}】 {{ item.title }}</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div v-else class="content">
            <div class="no-data">暂无数据</div>
        </div>
    </div>
</body>
<style>
    html,
    body {
        height: 100vh;
        width: 100vw;
        margin: 0;
        background: linear-gradient(to bottom right, #94d5e6, #f3c1ff);
    }

    ul,
    li {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    a {
        color: #000;
        text-decoration: none;
    }

    .content {
        margin: auto;
        height: 100%;
        max-width: 1000px;

        position: absolute;
        left: 0;
        right: 0;
    }

    .content-pad {
        display: flex;
        margin: 20px 10px;
        height: calc(100% - 40px);
        border-radius: 10px;
        overflow: hidden;
    }

    .left,
    .items {
        background: #fff8;
        overflow-y: scroll;
    }

    .left {
        width: 240px;
        margin-right: 10px;
        padding: 10px;
    }

    .items {
        flex: 1;
    }

    .filter {
        background: #fffd;
        padding: 10px;
        position: sticky;
        top: 0;
        z-index: 100;

    }

    .grid {
        display: grid;

    }

    .item {
        display: block;
        margin: 10px;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 0 5px #0008;
        color: blue;
    }

    .item:hover {
        background: #fffa;
        color: deeppink
    }

    /* #region 背景*/
    .backcolor,
    .backcolor2,
    .backcolor3,
    .main {
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
    }

    .backcolor {
        display: flex;
        animation: turnColor 10s infinite;
        background: linear-gradient(to top right, #cde0a8, #e2aff6);
    }

    .backcolor2 {
        animation: turnColor2 10s infinite;
        background: linear-gradient(to bottom right, #f0b6da, #d5f3b2);
    }

    .backcolor3 {
        animation: turnColor3 10s infinite;
        background: linear-gradient(to top right, #d0b0e7, #a9e5eb);
    }

    @keyframes turnColor {
        0% {
            opacity: 0;
        }

        25% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }

        75% {
            opacity: 0;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes turnColor2 {
        0% {
            opacity: 0;
        }

        25% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        75% {
            opacity: 0;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes turnColor3 {
        0% {
            opacity: 0;
        }

        25% {
            opacity: 0;
        }

        50% {
            opacity: 0;
        }

        75% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    /* #endregion 背景*/
</style>
<script type="module">
    import { createApp } from '/lib/vue-esm.js'
    createApp({
        data() {
            return {
                data: [],
                leftShow: true,
                filterAuthor: '',
                authors: [],
                filteredData: [],
                columns: 3
            }
        },
        mounted() {
            fetch('./shortcuts.json')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('无法加载 shortcuts.json');
                    }
                    return response.json(); // 解析 JSON 数据
                })
                .then(shortcuts => {
                    this.data = shortcuts.map(item => this.processShortcut(item));
                    // 处理每个快捷方式
                    // this.data = shortcuts
                    // 筛选数据
                    this.filterData();
                    // 自动获取作者
                    this.authors = [...new Set(this.data.map(item => item.author))];
                    console.log(this.data);

                })
            // 监听窗口宽度小于500px时，隐藏左侧导航栏
            window.addEventListener('resize', () => {
                if (window.innerWidth < 700) {
                    this.leftShow = false;
                    if (window.innerWidth < 500) {
                        this.columns = 1;
                    } else {
                        this.columns = 2;
                    }
                } else {
                    this.leftShow = true;
                    if (window.innerWidth < 800) {
                        this.columns = 1;
                    } else if (window.innerWidth < 1000) {
                        this.columns = 2;
                    } else {
                        this.columns = 3;
                    }
                }


            });


        },
        methods: {
            filterData() {
                // 筛选数据
                let filteredData = this.data.filter(item => {
                    return item.author === this.filterAuthor || this.filterAuthor === '';
                });
                // 根据author和title排序
                // filteredData.sort((a, b) => {
                //     // 先比较author
                //     const authorCompare = a.author.localeCompare(b.author, 'zh-CN', { sensitivity: 'base' });
                //     if (authorCompare !== 0) {
                //         return authorCompare; // author不同时，直接按author排序
                //     }
                //     // 若author相同，再比较title
                //     return a.title.localeCompare(b.title, 'zh-CN', { sensitivity: 'base' });
                // });
                this.filteredData = filteredData;
            },
            // # region 格式化data
            processShortcut(item) {
                const { name, url } = item;
                // 正则匹配"开头的【...】"（非贪婪匹配，只取第一个】）
                const authorMatch = name.match(/^【(.*?)】/);

                let author, title;
                if (authorMatch) {
                    // 提取第一个【】中的内容作为author
                    author = authorMatch[1].trim();
                    // 去除第一个【】及其内容，剩余部分作为title（保留后续可能的【】）
                    title = name.replace(authorMatch[0], '').trim();
                } else {
                    // 无【】时，author为null，title保留原始name
                    author = null;
                    title = name.trim();
                }
                // 获取url最后一项
                const id = url.split('/').pop();
                delete item.name
                return {
                    ...item,
                    author,
                    title,
                    id
                };
            }

            //    # endregion 格式化data
        }
    }).mount('#app')
</script>

</html>